<template>
  <div>
    <el-container>
      <!-- header -->
      <el-header>
        <div class="header-container">
          <img src="../assets/logo.png" alt="">
          <div class="rotate-vert-center">
            <h1>健身管理系统</h1>
          </div>
          <div class="shake-bottom">
            <el-popconfirm title="确定退出吗？" @confirm="logout()">
              <el-button size="mini" type="info" slot="reference">退出管理系统</el-button>
            </el-popconfirm>
          </div>
        </div>
      </el-header>
      <el-container>
        <!-- side -->
        <el-aside style="width: 250px;">
          <el-menu default-active="1" background-color="#000" text-color="#fff"
            active-text-color="#d0992a" style="height:calc(100vh - 60px)" router>
            <el-menu-item index="1">
              <i class="el-icon-menu"></i>
              <span slot="title">用户管理</span>
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">教练模块</span>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="el-icon-setting"></i>
              <span slot="title">课程模块</span>
            </el-menu-item>
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>公司管理</span>
              </template>
              <el-menu-item index="4-1">场馆管理</el-menu-item>
              <el-menu-item index="4-2">页面管理</el-menu-item>
            </el-submenu>

          </el-menu>
        </el-aside>
        <!-- section -->
        <el-main>

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations(['adminlogout']),
    logout() {
      this.$router.push('/adminlogin')
      this.adminlogout()
    }
  },
}
</script>

<style lang="scss" scoped>
.el-header {
  padding: 0;
}

.header-container {
  display: flex;
  justify-content: space-between;
  line-height: 60px;
  background-color: #000;
  color: #fff;
  user-select: none;

  img {
    width: 60px;
    padding: 5px;
    box-sizing: border-box;
    margin-left: 30px;
  }

  &>div:nth-child(3) {
    margin-right: 30px;
  }
}

.rotate-vert-center:hover {
  animation: rotate-vert-center 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

@keyframes rotate-vert-center {
  0% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }

  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}


.shake-bottom:hover {
  animation: shake-bottom 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
}

@keyframes shake-bottom {

  0%,
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
  }

  10% {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }

  20%,
  40%,
  60% {
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }

  30%,
  50%,
  70% {
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }

  80% {
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }

  90% {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
}
</style>